<template>
    <div class="profile">
        <el-card class="profile-card">
            <template #header>
                <div class="card-header">
                    <h3>个人信息</h3>
                </div>
            </template>
            <el-form :model="userInfo" label-width="100px">
                <el-form-item label="用户名">
                    <el-input v-model="userInfo.username" disabled />
                </el-form-item>
                <el-form-item label="注册时间">
                    <el-input v-model="userInfo.createdAt" disabled />
                </el-form-item>
                <el-form-item label="设备数量">
                    <el-input v-model="userInfo.deviceCount" disabled />
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="profile-card">
            <template #header>
                <div class="card-header">
                    <h3>修改密码</h3>
                </div>
            </template>
            <el-form :model="passwordForm" :rules="rules" ref="passwordFormRef" label-width="100px">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="passwordForm.oldPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="passwordForm.newPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleChangePassword">
                        修改密码
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { authService } from '../api/services'

const userInfo = reactive({
    username: localStorage.getItem('username') || '',
    createdAt: '',
    deviceCount: 0
})

const passwordForm = reactive({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})

const passwordFormRef = ref<FormInstance>()

const validatePass = (rule: any, value: string, callback: Function) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (passwordForm.confirmPassword !== '') {
            if (passwordFormRef.value) {
                passwordFormRef.value.validateField('confirmPassword')
            }
        }
        callback()
    }
}

const validatePass2 = (rule: any, value: string, callback: Function) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
    } else {
        callback()
    }
}

const rules = {
    oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
    newPassword: [{ validator: validatePass, trigger: 'blur' }],
    confirmPassword: [{ validator: validatePass2, trigger: 'blur' }]
}

const handleChangePassword = async () => {
    if (!passwordFormRef.value) return

    await passwordFormRef.value.validate((valid) => {
        if (valid) {
            // TODO: 实现修改密码的API调用
            ElMessage.success('密码修改成功')
            passwordForm.oldPassword = ''
            passwordForm.newPassword = ''
            passwordForm.confirmPassword = ''
        }
    })
}

const loadUserInfo = async () => {
    try {
        const response = await authService.getUserInfo()
        const { username, createdAt, deviceCount } = response.data
        userInfo.username = username
        userInfo.createdAt = new Date(createdAt).toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        })
        userInfo.deviceCount = deviceCount
    } catch (error: any) {
        ElMessage.error(error.message || '获取用户信息失败')
    }
}

onMounted(async () => {
    await loadUserInfo()
})
</script>

<style scoped>
.profile {
    max-width: 800px;
    margin: 0 auto;
}

.profile-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    margin: 0;
    font-size: 18px;
    color: #303133;
}
</style>